<template>
  <view>
    <!-- 搜索框开始    -->
    <YgSerch></YgSerch>
    <!-- 搜索框结束    -->

    <!-- 轮播图开始 -->
    <u-swiper :list="swiperlist" name="image_src" height="340"></u-swiper>
    <!-- 轮播图结束-->

    <!-- 导航栏开始 -->
    <view class="catitem u-flex">
      <navigator
        v-for="item in catitems"
        :key="item.name"
        class="u-flex-1 u-padding-30"
      >
        <u-image :src="item.image_src" width="100%" mode="widthFix"></u-image>
      </navigator>
    </view>
    <!-- 导航栏结束 -->

    <!-- 楼层模块开始 -->
    <view class="floor">
      <view
        class="floor-group"
        v-for="(val, index1) in floordata"
        :key="index1"
      >
        <view class="group-title">
          <u-image
            mode="widthFix"
            width="100%"
            :src="val.floor_title.image_src"
          ></u-image>
        </view>
        <view class="group-content">
          <navigator
            v-for="(val2, index2) in val.product_list"
            :key="val2.name"
          >
            <!-- 当前第一张图片给他设置widthFix ，保持原图宽高比不变，  宽度不变，高度自动变化 -->
            <!-- 否则是不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 -->
            <u-image
              :mode="index2 === 0 ? 'widthFix' : 'scaleToFill'"
              height="100%"
              :src="val2.image_src"
            ></u-image
          ></navigator>
        </view>
      </view>
    </view>
    <!-- 楼层模块结束 -->
  </view>
</template>

<script>
export default {
  // 定义变量存轮播图数组
  data() {
    return {
      // 轮播图数组
      swiperlist: [],
      // 导航数组
      catitems: [],
      // 楼层数据
      floordata: [],
    };
  },

  // 页面初始化，从服务器获取数据
  async onLoad() {
    //轮播图请求数据
    const resSwiper = await this.$u.get("/home/swiperdata");
    //导航请求数据
    const resCate = await this.$u.get("/home/catitems");
    //楼层请求数据
    const resfloor = await this.$u.get("/home/floordata");
    console.log(resfloor);
    //把数据请求回来赋值给swiperList，渲染页面
    this.swiperlist = resSwiper.message;
    this.catitems = resCate.message;
    this.floordata = resfloor.message;
  },
};
</script>

<style lang="scss">
/* 楼层 */
.floor {
  .floor-group {
    .group-content {
      overflow: hidden;
      // padding: 10rpx;
      navigator {
        float: left;
        width: 33.33%;
        border-left: 5rpx solid #fff;
        border-right: 5rpx solid #fff;

        &:nth-last-child(-n + 4) {
          // 后四个
          height: 198rpx;
        }
        &:nth-last-child(-n + 2) {
          // 后两个
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
